<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<div id="Stats-output"></div>
<div id="map" style="width: 100%;height: 500px">

</div>
<!-- 引入js文件 -->
<script src="bundle.js"></script>
<script>
    var map = new free.FreeMap('map', {
        center: new free.LatLng(30.596898, 104.04380614)
    });

    var indoorSource = new free.GeoJsonSource('indoorSource',
        new URL('./lyys_tcc_B1.geojson', window.location.origin));

    function createFillLayer(fillColor, fillOutlineColor, id) {
        var layer = new free.FillLayer('layer' + id, 'indoorSource',
            new free.PropertyEqFilter('newcategoryid', id));
        layer.setStyle({
            fillColor: fillColor,
            fillOutlineColor: fillOutlineColor
        });
        return layer;
    }

    function createTextLayer() {
        var textLayer = new free.TextLayer('layer_text', 'indoorSource');
        return textLayer;
    }

    function createExtrudeLayer(fillColor, fillOutlineColor, id) {
        var exlayer = new free.FillExtrusionLayer('layer_ex_' + id, 'indoorSource',
            new free.PropertyEqFilter('newcategoryid', id));
        exlayer.setStyle({
            fillExtrusionColor: fillColor,
            fillExtrusionOpacity: 0.7,
            fillExtrusionOutlineColor: fillOutlineColor
        });
        return exlayer;
    }

    map.mapRenderer.camera.zoomTo(19);

    map.addSource(indoorSource);
    map.addLayer(createFillLayer('#FFFFFF', '#ffab6f', '201801'));
    map.addLayer(createFillLayer('#d1f3ff', '#b4b4b4', '201804'));
    map.addLayer(createFillLayer('#d0cbcb', '#b2afaf', '201805'));
    map.addLayer(createFillLayer('#ded3fc', '#877e9f', '201806'));
    map.addLayer(createFillLayer('#e2e2e2', '#83817e', '201812'));
    map.addLayer(createFillLayer('#ded3fc', '#877e9f', '201815'));
    map.addLayer(createFillLayer('#fbdec3', '#4563f9', '201816'));
    map.addLayer(createFillLayer('#fae2d6', '#f4cccc', '201817'));
    map.addLayer(createFillLayer('#e1b075', '#bd976a', '201818'));
    map.addLayer(createFillLayer('#a6e1ff', '#7aa8bf', '201820'));
    map.addLayer(createFillLayer('#cccccc', '#807f7f', '201821'));
    //map.addLayer(createExtrudeLayer('#d1f3ff', '#b4b4b4', '201804'));
    map.addLayer(createTextLayer());

</script>
</body>
</html>
